<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>火云鞋神购物鞋店--个人中心</title>
    <meta name="" content=""/>
    <meta name="">
    <link rel="shortcut icon" href="../img/favicon_2.ico"/>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/zyUpload.css" type="text/css">
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <!-- 引用核心层插件 -->
    <script type="text/javascript" src="../js/zyFile.js"></script>
    <!-- 引用控制层插件 -->
    <script type="text/javascript" src="../js/zyUpload.js"></script>
    <!-- 引用初始化JS -->
    <script type="text/javascript" src="../js/demo.js"></script>
    <!--<link rel="stylesheet" href="bootstrap.min.css">-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"/>
    <script src="js/jquery-3.3.1.min.js"></script>

    <style>
        #image {
            /*display: block;*/
            display: inline-block;
            /* This rule is very important, please don't ignore this */
            max-width: 100%;

        }
        #div {
            max-width: 500px;
        }

        #canvas{
            width: 300px;
            position: absolute;

            top: 162px;
            left: 510px;
        }
    </style>
</head>
<body>
<div class="content" style="height: 740px ">
    <div class="main">
        <!--更改-->
        <div class="hd">
            <h3>账户管理</h3>
        </div>
        <!--更改-->
        <div class="dd" >
            <div class="nav_right">
                <ul>
                    <li><a href="http://localhost:63343/qiguai/html/person.html" >基本资料</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/person2.html" style="font-weight: bolder">头像照片</a></li>
                </ul>
            </div>

            <!--更改aftersale_detail_txt_ac-->
            <!--<div class="show" style="padding-left: 50px;padding-top: 30px;background-color: white;border-top: 1px black solid">
                <h1 style="text-align:center;">图像照片</h1>
                <div id="demo" class="demo" ></div>
            </div>-->
            <div>
                <input type="file" style="padding: 20px" id="file"/>
                <button id="close" >取消</button>
                <div id="div">

                    <img id="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608525826844&di=4bb44ccca24813b3bea4b576afccf8ea&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F9548bc41fa62cbdcf66eba57a4dba7ad1cc1dfc8ad8-B6UepM_fw658" alt=""/>
                    <!--<img id="image" src="../photo/2011f894-d7ee-4530-a121-9b42caf14b47.jpg" alt=""/>-->
                    <img id="canvas" src="" alt=""/>

                </div>
                <button id="btn" style="font-size: 30px;margin-top: 10px">图片上传</button>


            </div>

        </div>
    </div>
    <nav class="nav_aftersale">
        <div class="dropdown_aftersale">
            <div class="list_txt font_family ">
                <ul class="li">
                    <!--<li><a href="#">我的订单</a></li>
                    <li><a href="#">我的优惠券</a></li>
                    <li><a href="#">我的物流</a></li>
                    <li><a href="#">关注的商品</a></li>
                    <li><a href="#">我的足迹</a></li>
                    <li><a href="#">售后服务</a></li>-->
                    <li><a href="http://localhost:63343/qiguai/html/CollectShow.html?_ijt=obhlshosup6n9gvu1ojnfh003s">我的收藏</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/uaftsale.html" style="font-weight: bolder">我的售后</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/ucoupon.html" style="font-weight: bolder">我的优惠券</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/ulogistic.html" style="font-weight: bolder">我的物流</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/CollectShow.html" style="font-weight: bolder">关注的商品</a></li>
                    <!--<li><a href="#">我的足迹</a></li>-->
                    <li><a href="http://localhost:63343/qiguai/html/uaftsale.html" style="font-weight: bolder">售后服务</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/person.html" style="font-weight: bolder">个人信息</a></li>
                    <li><a href="http://localhost:63343/qiguai/html/adress.html" style="font-weight: bolder">收货地址</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
</body>
<script src="../js/cookie.js"></script>
<script>
    var userId = getCookie("userid")

    var cropper
    //onchange 事件会在域的内容改变时发生
    document.getElementById("file").onchange = function (e) {
        document.getElementById("canvas").style.opacity = 1
        if (cropper) {
            //销毁裁剪器
            cropper.destroy()
        }
        //获取事件触发元素的文件
        //target 属性规定哪个DOM元素触发了该事件
        var file = e.target.files[0]

        //FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
        var reader = new FileReader()
        //将文件读取为 DataURL
        reader.readAsDataURL(file)

        //文件读取完成时触发
        reader.onload = function (et) {
            /**
             * 文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。
             * 如果读取失败，则 result 的值为 null ，否则即是读取的结果，
             * 绝大多数的程序都会在成功读取文件的时候，抓取这个值。
             * @type {string | ArrayBuffer}
             */
                //获取实例的result属性
            const clip = document.getElementById('image');
            clip.src = et.target.result
            //cropper = new Cropper(被裁剪对象,配置对象);
            cropper = new Cropper(clip, {
                // aspectRatio: 16 / 9,// 定义裁剪图比例
                //3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充
                viewMode: 3,
                //默认不显示裁剪框
                //autoCrop:false,
                crop(event) {
                    // console.log(event.detail.width)
                    document.getElementById("canvas").style.width = event.detail.width/4 + "px"
                    document.getElementById("canvas").style.height = event.detail.height/4 + "px"
                    /**
                     * 拿到裁剪后的base64的图片,储存在浏览器缓存中
                     * base64文件编码的方式
                     * 将url转换成dataurl
                     * @type {string}
                     */
                    //cropper.getCroppedCanvas() 获得裁剪后的canvas元素
                    document.getElementById("canvas").src = cropper.getCroppedCanvas().toDataURL('image/jpeg')
                },
            });
        }
    }
    document.getElementById("btn").onclick = function () {
        var blob = dataURItoBlob(document.getElementById("canvas").src)
        var myFile = new File(
            [blob],
            document.getElementById("file").files[0].name,
            {type: document.getElementById("file").files[0].type});

        var formData = new FormData
        formData.set("file", myFile)
        $.ajax({
            url:"http://localhost:8080/clip/"+ userId,
            type:"post",
            data:formData,
            dataType:"json",
            processData: false,
            contentType: false,
            success:function (data) {
                console.log(data)

                if(data.code == 1){
                    alert("上传成功!")
                    parent.location.href="http://localhost:63343/qiguai/html/userperson.html"
                }else{
                    console.log("呜呜呜")
                }
            }
        })
    }
    document.getElementById("close").onclick = function ()  {
        document.getElementById("file").value = ""
        if (cropper) {
            cropper.destroy()
        }
        document.getElementById("image").src = ""
        document.getElementById("canvas").src = ""
        document.getElementById("canvas").style.opacity = 0

    }

    //将dataurl 转换为 blob
    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else {
            byteString = unescape(base64Data.split(',')[1]);
        }
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        var blob = new Blob([ia], {
            type: mimeString
        });
        return blob;
    }
</script>
</html>